<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/c/font_4544780_1yqex2d8nlj.css"
    />
    <style>
      .nav {
        margin: 0 auto;
        position: relative;
        width: 400px;
        height: 60px;
        background-color: rgb(220, 220, 220);
        border: 2px solid #cecece;
        border-radius: 5px;
      }
      div > .fontDiv {
        font-size: 30px;
        color: #fff;
        width: 30px;
        height: 30px;
        position: absolute;
        left: 5px;
        top: 12px;
        background-color: rgb(220, 220, 220);
        border: 0;
      }
      .inputSelect {
        position: absolute;
        top: 5px;
        left: 50px;
        width: 200px;
        height: 50px;
        color: #fff;
        /* border: 1px solid #cecece; */
        background: linear-gradient(
          to bottom,
          rgb(83, 83, 83),
          rgb(147, 147, 147)
        );
      }
      .inputSelect > .game {
        position: absolute;
        width: 199px;
        height: 50px;
        padding: 0;
        display: none;
        border-top: 2px dashed #fff;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        border-bottom: 2px dashed #fff;
        background-color: rgb(43, 43, 43);
        color: #fff;
      }
      .inputSelect > .a {
        position: absolute;
        color: #fff;
        top: 15px;
        border: 0;
        background-color: rgba(0, 0, 0, 0);
      }
      .inputSelect > input::-webkit-input-placeholder {
        font-size: 16px;
        text-align: left;
        color: #fff;
      }
      #sanJiao {
        position: absolute;
        cursor: pointer;
        top: 15px;
        right: 10px;
        width: 0;
        height: 0;
        /* border-bottom: 15px solid rgb(147, 147, 147); */
        border-right: 15px solid transparent;
        border-top: 15px solid rgb(147, 147, 147);
        border-left: 15px solid transparent;
      }
      #btn {
        cursor: pointer;
      }
      .nav > input {
        width: 80px;
        height: 50px;
        position: absolute;
        top: 5px;
        right: 20px;
        border: 2px solid #cecece;
        background-color: rgb(234, 234, 234);
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <div class="fontDiv iconfont icon-sousuo1"></div>
      <div class="inputSelect">
        <input type="text" class="a" placeholder="请选择游戏名称" />
        <input type="text" class="game" value="地下城与勇士" />
        <input type="text" class="game" value="魔兽世界(国服)" />
        <input type="text" class="game" value="魔兽世界(台服)" />
        <input type="text" class="game" value="热血江湖" />
        <input type="text" class="game" value="大话西游Ⅱ" />
        <input type="text" class="game" value="QQ幻想世界" />
        <div id="sanJiao"></div>
      </div>
      <input type="button" value="搜索" id="btn" />
    </div>
  </body>
  <script>
    window.onload = function () {
      var aOption = document.querySelectorAll("option");
      var oSelect = document.querySelector("select");
      var aInput = document.querySelectorAll(".game");
      var oPosition = document.querySelector(".inputSelect");
      var TopInput = document.querySelector(".a");
      var oBtn = document.querySelector("#btn");
      for (var i = 0; i < aInput.length; i++) {
        aInput[i].style.top = oPosition.offsetHeight * (i + 1) + "px";
      }
      var SanJiao = document.querySelector("#sanJiao");
      var flag = 0;
      SanJiao.onclick = function () {
        flag++;
        if (flag % 2 == 0) {
          SanJiao.style.borderTopWidth = "15px";
          SanJiao.style.borderTopStyle = "solid";
          SanJiao.style.borderTopColor = "rgb(147, 147, 147)";
          SanJiao.style.borderBottom = 0;
          for (var i = 0; i < aInput.length; i++) {
            aInput[i].style.display = "none";
          }
        } else {
          SanJiao.style.borderBottomWidth = "15px";
          SanJiao.style.borderBottomStyle = "solid";
          SanJiao.style.borderBottomColor = "rgb(147, 147, 147)";
          SanJiao.style.borderTop = 0;
          // SanJiao.style.top =
          //   parseFloat(SanJiao.style.top.replace("px", "")) + 10 + "px";
          for (var i = 0; i < aInput.length; i++) {
            aInput[i].style.display = "block";
          }
        }
      };
      for (let i = 0; i < aInput.length; i++) {
        //用var取不到值,用let正常
        aInput[i].onmouseover = function () {
          aInput[i].style.backgroundColor = "rgb(139,139,139)";
          aInput[i].style.cursor = "pointer";
          console.log(aInput[i]);
          TopInput.value = aInput[i].value;
        };
        aInput[i].onmouseout = function () {
          aInput[i].style.backgroundColor = "rgb(43,43,43)";
          console.log("鼠标移出");
        };
        aInput[i].onclick = function () {
          flag++;
          SanJiao.style.borderTopColor = "transparent";
          SanJiao.style.borderBottomColor = "rgb(147, 147, 147)";
          for (var i = 0; i < aInput.length; i++) {
            aInput[i].style.display = "none";
          }
        };
      }
      oBtn.onclick = function () {};
    };
  </script>
</html>
